<template>
<el-card class="recent-exam">
          <template #header>
            <div class="card-header">
              <span>实时订单</span>
            </div>
          </template>
          <div class="scroll-container">
          <el-timeline class="auto-scroll">
            <el-timeline-item v-for="(exam, index) in recentExams" :key="index" :timestamp="exam.time">
              {{ exam.name }}
              <el-tag :type="exam.status === '未开始' ? 'success' : 'info'">
                {{ exam.status }}
              </el-tag>
            </el-timeline-item>
          </el-timeline>
        </div>
        </el-card>
</template>

<script setup lang="ts">
  const props = defineProps({
    recentExams: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  })
</script>

<style lang="scss" scoped>
@use '@/assets/scss/variables' as *;
.recent-exam {
  margin-top: 20px;
        border-radius: 12px;
        overflow: hidden;

        .scroll-container {
        height: 300px; /* 固定容器高度 */
        overflow: hidden;
        position: relative;
  
  .auto-scroll {
    position: absolute;
    animation: scroll 60s linear infinite;
    
    &:hover {
      animation-play-state: paused;
    }
    /* 当内容不足时不滚动 */
    @media (max-height: 300px) {
        animation: none;
      }
  }

  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(-100% + 300px)); /* 根据容器高度调整 */
    }
  }
}

        :deep(.el-timeline) {
          .el-timeline-item {
            padding-bottom: 20px;

            &__wrapper {
              padding-left: 20px;
            }

            &__timestamp {
              color: $text-secondary;
              font-size: 13px;
            }

            &__node {
              width: 14px;
              height: 14px;
              left: -1px;
            }
          }
        }

        .el-tag {
          margin-left: 12px;
          font-weight: 500;
          letter-spacing: 0.5px;
        }
      }
</style>